<template>
  <!-- 首页中间地图 -->
  <div class="map-wrap">
    <div class="mapCenter" >
      <div class="opration-top">
        <p class="refrashDate" v-if="!displayphone">
          <!-- <span @click="backMap">全国</span>
          <span @click="backMap" v-if="!firstRender && third == false">-江苏省分行</span>
          <span @click="backMap" v-if="!firstRender && isShowcity == true">-无锡市分行</span>
          <span>档案中心</span> -->
          <span>智能档案库综合监管平台</span>
        </p>
      </div>

      <div class="map-container" v-if="!enclosureMapShow">
      <div class="anniubtn">
        <div class="select-box">
          <!-- <el-select
            class="select-style"
            collapse-tags
            :popper-append-to-body="false"
            ref="fieldSelect"
            multiple
            clearable
            v-model="value"
            filterable
            placeholder="查询条件"
            @focus="focus"
            @blur="blur"
          >
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select> -->
        </div>
        <el-button :class="dataType == 2 ? 'mapBtn button-choose' : 'mapBtn'" size="mini" @click.native="oneMonth">近一月</el-button>
        <el-button :class="dataType == 1 ? 'mapBtn button-choose' : 'mapBtn'" size="mini" @click.native="sevenDay" id="seven-day">近一周</el-button>
        <el-button :class="dataType == 0 ? 'mapBtn button-choose' : 'mapBtn'" size="mini" @click.native="threeDay">近三天</el-button>
      </div>
      <p class="refrashDate2" v-if="displayphone">
        <span>全国</span>
        <span @click="backMap" v-if="!firstRender && third == false">-江苏省工行</span>
        <span @click="backMap" v-if="!firstRender && isShowcity == true">-无锡市分行</span>
      </p>
      <div class="select flex">
        <div>
          <!-- <el-select
            class="select-style"
            :popper-append-to-body="false"
            ref="fieldSelect"
            multiple
            clearable
            v-model="value"
            filterable
            placeholder="查询条件"
            style="height: 30px"
            @focus="focus"
            @blur="blur"
          >
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select> -->

        </div>
        <div style="margin-left:auto;margin-right:10px">
          <el-button v-if="!displayNone" type="success" size="mini" @click.native="backMap">上一级</el-button>
        </div>
      </div>
    </div>

    <div id="container" v-if="!enclosureMapShow"></div>
    

    <div class="enclosure-map-container" v-if="enclosureMapShow">
      <EnclosureMap :depotId="depotId"/>
    </div>


      <!-- 地图下方滚动 -->
      <div class="lunbo">
        <!-- <div class="carous">
          <el-carousel height=".4rem" @click.native="handleClick">
            <el-carousel-item
              v-for="(ca, i) in newArr"
              :key="i + 'ca'"
              :interval="10000"
              arrow="always"
            >
              <p class="lunbo-tit">
                <span style="color: #01F0F4;font-weight: bold;">【{{ca.name}}】</span>
                <span>{{ ca.desc }}数</span>
              </p>
            </el-carousel-item>
          </el-carousel>
        </div> -->
      </div>

    </div>
  </div>
</template>

<script>
import './mapChart.scss'
// import { HighlightLocation } from "@/utils/utils";
import {getCenterPoint, HighlightLocation} from './mapChartFloatingLine'
let echarts = require("echarts/lib/echarts");
let baseUrl;
import $ from "jquery";
import EnclosureMap from "@/components/map.vue";
import { geoCoordMap, GZData } from "./myMap";
// special 特殊的城市 - 直辖四市+香港澳门
// provinces 23个省级行政区
// cityMap  市级行政区 - 用于获得相应市的的区域信息
import { provinces, cityMap, special } from "./common";
require("echarts/lib/chart/map");
require("echarts/map/js/china");
let myChart;
let provincesName = "jiangsu";
// "zhejiang";
let mapStack = [];
let _self;
//排序数据
let sortData = [];
let areaList = [];
//排序后的标题
let titledata = [];
let mapName = "江苏省";
import { baseEnv } from "@/request";
export default {
  name: "mapChart",
  props: {
    depotId: {
      type: String,
      default: null,
    },
  },
  components: {
    EnclosureMap
  },
  data() {
    return {
      dataType: 2,
      enclosureMapShow: false,
      displayNone: true,
      displayphone: false,
      areaList: areaList,
      dt: new Date(),
      focused: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      // newArr: [
      //   {
      //     name: "姑苏支行",
      //     desc:
      //       " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
      //   },
      // ],
      carouselData: [
        {
          name: "姑苏支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        },
        {
          name: "工业园区支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        }
      ],
      second: false,
      mapChina: [],
      firstRender: true,
      isShowcity: true,
      third: false,
      curMap: {},
      options: [
        {
          label: "年限",
          options: [
            {
              value: "1",
              label: "2020年"
            },
            {
              value: "2",
              label: "2021年"
            }
          ]
        },
        {
          label: "档案类型",
          options: [
            {
              value: "3",
              label: "会计"
            },
            {
              value: "4",
              label: "信用卡"
            },
            {
              value: "5",
              label: "文书"
            },
            {
              value: "6",
              label: "借贷"
            }
          ]
        }
      ],
      value: "1",
      highLightLoc: '淮安'
    };
  },
  computed: {},
  beforeMount() {
    // 判断当前进入的是不是 /about - 展示电子围栏
    if (this.$route.path === '/about') {
      this.enclosureMapShow = true
      return 
    } else {
      this.enclosureMapShow = false
    }
    
    // // 获得地图下方 滚动信息
    // let baseUrl = "/customer-aim";
    // this.axios.get(`${baseUrl}/hygrother/getValue?id=30041945`).then(res => {

    //   console.log(res, '1111获得数据居')
    //   let data = res.data.data || null;
    //   if (data) {
    //     (this.tem = data.tem || 22.5), (this.hum = data.hum || 42.8);
    //     this.newArr = this.carouselData.map(el => {
    //       return {
    //         name: el.name,
    //         desc: `温度${data.tem}℃  湿度${data.hum}%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25`
    //       };
    //     });
    //   }
    // }).catch(err => {
    //   console.log(err, '错误')
    // })

    // 判判断展示的是哪个depotId ，高亮城市

    // console.log(, 'zeepzeep')
    this.highLightLoc = HighlightLocation(this.$route.query.depotId)

    console.log(this.$route.query.depotId,this.highLightLoc, 'zeepzeep')


  },
  mounted() {
    _self = this;
    if (baseEnv == "development") {
      baseUrl = "/api";
    } else {
      // https://api.qcdoc.cn
      baseUrl = "https://overall.qcdoc.cn/";
    }
    if (window.outerWidth < 768) {
      this.displayphone = true;
    } else {
      this.displayphone = false;
    }
    // 初始化加载
    this.mapChart();
    // this.$nextTick(function() {
    //   this.$refs.fieldSelect.$refs.scrollbar.$el.classList.add(
    //     "scroll-opacity"
    //   );
    // });
  },
  methods: {
// type 类型标识：0 近三天 1：近一周 2近1个月
    // 近三天
    threeDay() {
      this.dataType = 0
      this.$emit("changeData", {type: 0});
    },
    // 近七天
    sevenDay() {
      this.dataType = 1
      this.$emit("changeData", {type: 1});
    },
    // 近一月
    oneMonth() {
      this.dataType = 2
      this.$emit("changeData", {type: 2});
    },
    focus() {
      console.log('focus')
    },
    blur() {
      console.log('blur')
    },
    // handleClick() {
    //   console.log('handleClick')
    // },
    // 返回全国视图
    backMap() {
      //获取上一级地图信息 mapStack.pop() 不可以重复写
      let map = mapStack.pop();
      
      if (mapStack.length == 0) {
        this.$emit("changeProvenceData");
      }

      if (mapStack.length == 1) {
        // 是省
        provincesName = map.provincesName;
        // 第一级地图
        // myChart.clear();
        // myChart.off("click");
        // myChart.off("contextmenu");
        this.firstRender = true;
        this.second = false;
        this.third = false;
        this.isShowcity = false;
        
        setTimeout(() => {
          console.log('返回全国 - 江苏省 - 视图 加载全国地图')
          this.mapChart();
        }, 0);
        return;
      }

      if (mapStack.length == 0) {
        provincesName = map && map.provincesName;
        this.isShowcity = true;
      }

      console.log(map, mapStack.length, '返回')

      this.$echarts.registerMap(map?.mapName, map?.mapJson);
      sortData = map.sortData;
      titledata = map.titledata;
      this.initEcharts(map?.mapName, map?.mapJson, map?.sortData, false); //map.mapchin是data数据

      if (!map) {
        console.log("没有入栈数据了");
        return;
      }
    },

    
    //配置渲染map
    mapChart() {
      if (myChart != null && myChart != "" && myChart != "undefined") {
        myChart.dispose();
      }
      // 在container中 放入地图
      myChart = echarts.init(document.getElementById("container"));
      // myChart.showLoading();
      document.getElementById("container").oncontextmenu = function() {
        return false;
      };
      window.addEventListener("resize", () => {
        // myChart.resize();
      });

      // 去掉第一级的中国地图
      // 第一次渲染地图province/wuxi
      // zhejiang
      $.getJSON(`/map/province/jiangsu.json`, data => {
      // $.getJSON(`/map/china.json`, data => {
        console.log('‘jiangsu地图', data)
        this.mapChina = data;
        // myChart.hideLoading();
        let mapJsonData = [];
        for (var i = 0; i < data.features.length; i++) {
          mapJsonData.push({
            id: data.features[i].id,
            name: data.features[i].properties.name
          });
        }
        
        mapName = '江苏'
        echarts.registerMap(mapName, data);
        /**获取省份数据*/
        this.renderPrimaryMap(mapJsonData, true);
      });

      // this.showProvince({name: '江苏', data: {id: ''}})


      // 市
      // var that = this;

      // 点击触发
      // mousemove
      myChart.on("click", param => {
        
        
        provincesName = provinces[param.name] || cityMap[param.name];
        
        console.log('xxxxxxxxx', param, provincesName, provinces[param.name], cityMap[param.name], '点击地图触发。。。。。。。。。。。')


        if (param.componentSubType == "scatter" && this.isShowcity) {
          // this.randerHtml();
          // 这里 去展示围栏
          console.log('444444444', this.depotId)
          let routeData = this.$router.resolve({
            path: "/about",
            query: {
              depotId: this.depotId
            }
          });
          window.open(routeData.href, "_blank");
        }
        // console.error(param.data,param, "该地图没有下一级地区了");
        // if (param.data) {
          
        //   if (!(param.data.id || param.data.cityid)) {
        //     // 有省id，市id才有下一级
        //     console.error("该地图没有下一级地区了");
        //     return;
        //   }
        // } else {
        //   return;
        // }
        console.log(',mmmmmmmmmmm',special, provinces, param.name in provinces, param.name, this.curMap, provinces, 'provinces22222222222')
        if (param.name in provinces) {
          // 如果是 省 
          this.$emit("changeProvenceData");
          this.second = true;
          if (param.name == "江苏") {
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            console.log('是实际， 地图下钻', mapStack.length , n)
            if (mapStack.length < n) {

              console.log('是实际， 地图下钻')
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName
              });
            }

            console.log(mapStack, '2级下钻mapStackmapStackmapStack')
            if (window.outerWidth < 768) {
              this.displayNone = false;
            }
            this.firstRender = false;
          }
          // 下钻一层
          //直辖市和特别行政区-只有二级地图，没有三级地图
          if (special.indexOf(param.name) >= 0) {
            this.showProvince(param);
          } else {
            this.showProvince(param);
          }
        } else {
          // 显示县级地图
          // this.third = true;
          // if (param.name == "无锡市") {
          // //   this.$emit("changeCityData");
          //   this.isShowcity = true;
          //   this.showCitys(param);
          //   /**
          //    * 绑定数据入栈事件
          //    */
          //   let n = 1;
          //   if (special.indexOf(param.name) == -1) {
          //     n = 2; //2层
          //   }
          //   // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
          //   if (mapStack.length < n) {
          //     //   //将上一级地图信息压入mapStack
          //     mapStack.push({
          //       mapName: this.curMap.mapName,
          //       mapJson: this.curMap.mapJson, // mapJson
          //       sortData: this.curMap.sortData, // sortData
          //       titledata: this.curMap.titledata,
          //       provincesName: this.curMap.provincesName
          //     });
          //   }
          // }
          // if (param.name == "南京市") {

          //   console.log('是南京是', special.indexOf(param.name) == -1)
          //   //  this.$emit("changeCityData");
          //   this.isShowcity = true;
          //   this.showCitys(param);
          //   /**
          //    * 绑定数据入栈事件
          //    */
          //   let n = 1;
          //   if (special.indexOf(param.name) == -1) {
          //     n = 2; //2层
          //   }
          //   console.log(mapStack.length, n, '南京')
          //   // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
          //   if (mapStack.length < n) {
          //     //   //将上一级地图信息压入mapStack
          //     mapStack.push({
          //       mapName: this.curMap.mapName,
          //       mapJson: this.curMap.mapJson, // mapJson
          //       sortData: this.curMap.sortData, // sortData
          //       titledata: this.curMap.titledata,
          //       provincesName: this.curMap.provincesName
          //     });
          //   }
          // }
          console.log('wwwwwwwwww花鸟', param, this.curMap)
          if (param.name == "淮安市" || param.name == "南京市" || param.name == "徐州市") {
            // this.$emit("changeCityData");
            this.isShowcity = true;
            this.showCitys(param);
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            if (mapStack.length < n) {
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName
              });
            }
          }
        }
      });
      myChart.on("contextmenu", () => {
        this.backMap();
        return false;
      });
      //异步展示地图
      
      // this.showProvince(param)
    },

    //展示对应的省
    showProvince(param) {
      var that = this;
        console.log(param.name, param,'33333ncesprovinces')
        if (param.name == "江苏") {
          $.getJSON(`/map/province/${provinces[param.name]}.json`, data => {
            console.log(data, 'datadatadata')
            that.mapChina = data;
            that.$echarts.registerMap(param.name, data);
            let mapJsonData = [];
            for (var i = 0; i < data.features.length; i++) {
              // 读取地图的 name 用来组成 echart 需要的形式
              mapJsonData.push({
                name: data.features[i].properties.name,
                value: Math.floor(Math.random() * 10000)
              });
            }
            that.initEcharts(param.name, mapJsonData, null, false);
            if (param.data.id !== 'undefined') {
              
              that.getCityNumber(param.name, param.data.id, that.mapChina);
            }
          });
        } else {
          that.$message("当前城市暂未开拓");
          return;
        }
      },

      //展示对应市
      showCitys(param) {
        console.log(param, '显示的县级地图')
        var that = this;
        // 显示县级地图
        if (param.name == "无锡市") {
          $.getJSON(`/map/city/${cityMap[param.name]}.json`, data => {
            that.mapChina = data;
            that.$echarts.registerMap(param.name, data);
            let mapJsonData = [];
            that.$echarts.registerMap(param.name, data);
            for (var i = 0; i < data.features.length; i++) {
              // 读取地图的 name 用来组成 echart 需要的形式
              mapJsonData.push({
                name: data.features[i].properties.name
              });
            }

            // if (that.second) {
            //   that.initEcharts(param.name, mapJsonData, null, false);
            // } else {
            that.initEcharts(param.name, mapJsonData, null, false);
            // }
            //  if (param.data.cityid) {
            // let postData3 = {
            //   parentid: 'cityid',
            //   value: params.data.cityid,
            // }
            //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染
            // that.getAreaNumber(param.name, param.data.cityid, data)
            // }
          });
        } else if (param.name == "南京市") {
          $.getJSON(`/map/city/${cityMap[param.name]}.json`, data => {
            that.mapChina = data;
            that.$echarts.registerMap(param.name, data);
            let mapJsonData = [];
            that.$echarts.registerMap(param.name, data);
            for (var i = 0; i < data.features.length; i++) {
              // 读取地图的 name 用来组成 echart 需要的形式
              mapJsonData.push({
                name: data.features[i].properties.name
              });
            }

            // if (that.second) {
            //   that.initEcharts(param.name, mapJsonData, null, false);
            // } else {
            that.initEcharts(param.name, mapJsonData, null, false);
            // }
            //  if (param.data.cityid) {
            // let postData3 = {
            //   parentid: 'cityid',
            //   value: params.data.cityid,
            // }
            //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染
            // that.getAreaNumber(param.name, param.data.cityid, data)
            // }
          });
        } else if (param.name == "淮安市") {
          $.getJSON(`/map/city/${cityMap[param.name]}.json`, data => {
            that.mapChina = data;
            that.$echarts.registerMap(param.name, data);
            let mapJsonData = [];
            that.$echarts.registerMap(param.name, data);
            for (var i = 0; i < data.features.length; i++) {
              // 读取地图的 name 用来组成 echart 需要的形式
              mapJsonData.push({
                name: data.features[i].properties.name
              });
            }

            // if (that.second) {
            //   that.initEcharts(param.name, mapJsonData, null, false);
            // } else {
            that.initEcharts(param.name, mapJsonData, null, false);
            // }
            //  if (param.data.cityid) {
            // let postData3 = {
            //   parentid: 'cityid',
            //   value: params.data.cityid,
            // }
            //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染
            // that.getAreaNumber(param.name, param.data.cityid, data)
            // }
          });
        } else {
          that.$message("当前城市暂未开拓");
          return;
        }
      },
    initEcharts(mapTitle, mapJson, customerNum, status = false) {

      console.log(this.firstRender, mapTitle, mapJson, customerNum, status, '是地图入门')
      var objArr = [];
      let geo = {};
      // 
      this.renderScatter("jiangsu");
      // 是否第一级
      console.log(this.firstRender, '.firstRender')
      if (this.firstRender) {
        var color = [
          "yellow",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea"
        ];
        // [["南京市", GZData]].forEach(function(item, i) {
        //   objArr.push(
        //     // 涟漪散点图
        //     {
        //       name: item[0],
        //       type: "effectScatter",
        //       coordinateSystem: "geo",
        //       zlevel: 2,
        //       rippleEffect: {
        //         brushType: "stroke"
        //       },
        //       label: {
        //         normal: {
        //           show: true,
        //           fontSize: _self.$fontSize.fontSize(0.12),
        //           position: "right",
        //           formatter: "{b}"
        //         }
        //       },
        //       symbolSize: _self.$fontSize.fontSize(0.2),
        //       // function(val) {
        //       //   return val[2] / 8;
        //       // }
        //       itemStyle: {
        //         normal: {
        //           color: color[i]
        //         }
        //       },
        //       data: item[1].map(function(dataItem) {
        //         return {
        //           name: dataItem[1].name,
        //           value: geoCoordMap[dataItem[1].name].concat([
        //             dataItem[1].value
        //           ])
        //         };
        //       })
        //     }
        //   );
        // });
      }

      console.log('底基层- 制作散点图',this.third, this.second , !this.firstRender)

      if (this.firstRender) {
        // if (!this.second) {
          // 第二层
          // if(mapTitle=='无锡市' || mapTitle=="南京市区"){

          //   return
          // }
          console.log('底基层')
          this.renderCityScatter();
          var chinaGeoCoordMap = {
            // 经纬度
            南京市: [118.800697, 32.077625],
            无锡市: [120.308234, 31.498071],
            淮安市: [121.308234, 32.498071],
            宿迁市3333: [118.287324, 33.970145],
            // 徐州1: [119.287324, 34.970145],
            扬州市: [119.428622, 32.403603],
            南通市: [120.900441, 31.994389],
            泰州市: [119.926122, 32.464087]
          };
          var chinaDatas = [
            //航线条数
            [
              {
                name: "宿迁市",
                value: 0
              }
            ],
            [
              {
                name: "徐州1",
                value: 0
              }
            ],
            [
              {
                name: "淮安市",
                value: 0
              }
            ],
            [
              {
                name: "扬州市",
                value: 0
              }
            ],
            [
              {
                name: "南通市",
                value: 0
              }
            ],
            [
              {
                name: "泰州市",
                value: 0
              }
            ]
          ];
          var convertDataPro = function(data) {
            var res = [];
            console.log('线条IAO')
            // for (var i = 0; i < data.length; i++) {
            //   var dataItem = data[i];
            //   var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            //   var toCoord = [118.800697, 32.077625]; //目的地
            //   if (fromCoord && toCoord) {
            //     res.push([
            //       {
            //         coord: fromCoord,
            //         value: dataItem[0].value
            //       },
            //       {
            //         coord: toCoord
            //       }
            //     ]);
            //   }
            // }
            console.log(dataItem[0].name, 'hhhhhhhhhh')
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [120.308234, 31.498071]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value
                  },
                  {
                    coord: toCoord
                  }
                ]);
              }
            }
            return res;
          };


          
          objArr = [];
          // 地图配置
          geo = {
            geo: {
              show: true,
              map: provincesName,
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: "red"
                  }
                },
                emphasis: {
                  textStyle: {
                    color: "#000"
                  }
                }
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                  borderColor: "#EBEBE4", //#EBEBE4灰色
                  borderWidth: 0.5
                },
                emphasis: {
                  areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
                }
              }
            }
          };
          var symbolImg2 = "image://" + require("@/assets/logo.png");
          var symbolImg =
            "image://" + require("@/assets/gongshangyinhang-.png");
          var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
          // 加载 无锡市 地图
          // console.log('3333无锡市', [["无锡市", chinaDatas]]);

          // 下面 无锡 点 特效
          // [["无锡市", chinaDatas]].forEach(function(item) {
          //   objArr.push(
          //     {
          //       type: "lines",
          //       zlevel: 2,
          //       effect: {
          //         show: true,
          //         period: 5, //箭头指向速度，值越小速度越快
          //         trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
          //         symbol: symbolImgPlane, //箭头图标
          //         // symbol: "arrow", //箭头图标
          //         symbolSize: _self.$fontSize.fontSize(0.2) //图标大小
          //       },
          //       lineStyle: {
          //         normal: {
          //           width: 1, //尾迹线条宽度
          //           opacity: 1, //尾迹线条透明度
          //           curveness: 0.3, //尾迹线条曲直度
          //           color: "#f0814dea"
          //         }
          //       },
          //       data: convertDataPro(item[1])
          //     },
          //     {
          //       type: "effectScatter",
          //       coordinateSystem: "geo",
          //       zlevel: 2,
          //       rippleEffect: {
          //         //涟漪特效
          //         period: 20, //动画时间，值越小速度越快
          //         brushType: "stroke", //波纹绘制方式 stroke, fill
          //         scale: 0 //波纹圆环最大限制，值越大波纹越大
          //       },
          //       label: {
          //         normal: {
          //           show: true,
          //           position: "right", //显示位置
          //           offset: [5, 0], //偏移设置
          //           formatter: function(params) {
          //             //圆环显示文字
          //             return params.data.name;
          //           },
          //           fontSize: _self.$fontSize.fontSize(0.13)
          //         },
          //         emphasis: {
          //           show: true
          //         }
          //       },
          //       symbol: symbolImg,
          //       symbolSize: _self.$fontSize.fontSize(0.2),
          //       itemStyle: {
          //         normal: {
          //           show: false,
          //           color: "#f50"
          //         }
          //       },
          //       data: item[1].map(function(dataItem) {
          //         console.log(dataItem[0].name, '适合什么')
          //         return {
          //           name: dataItem[0].name,
          //           value: chinaGeoCoordMap[dataItem[0].name].concat([
          //             dataItem[0].value
          //           ])
          //         };
          //       })
          //     },
          //     //被攻击点
          //     {
          //       type: "scatter",
          //       coordinateSystem: "geo",
          //       zlevel: 2,
          //       rippleEffect: {
          //         period: 4,
          //         brushType: "stroke",
          //         scale: 4
          //       },
          //       label: {
          //         normal: {
          //           show: true,
          //           position: "right",
          //           //offset:[5, 0],
          //           color: "#0f0",
          //           formatter: "{b}",
          //           textStyle: {
          //             color: "#0f0"
          //           }
          //         },
          //         emphasis: {
          //           show: true,
          //           color: "#f60"
          //         }
          //       },
          //       symbol: symbolImg2,
          //       symbolSize: _self.$fontSize.fontSize(0.5),
          //       data: [
          //         {
          //           name: item[0],
          //           value: chinaGeoCoordMap[item[0]].concat([10])
          //         }
          //       ]
          //     }
          //   );
          // });
        // }
      }


      console.log(objArr, mapTitle, mapJson, 'objArrobjArrobjArrobjArr')
      let series = [];
      series = [
        ...objArr,
        {
          name: mapTitle, //上面的下钻用到seriesName绑定下一级，换name绑定
          type: "map",
          geoIndex: 0,
          map: mapTitle,
          // roam: false,
          zoom: 1,
          label: {
            normal: {
              show: true,
              fontSize: _self.$fontSize.fontSize(0.16)
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
              borderColor: "#EBEBE4" //#EBEBE4灰色
            },
            emphasis: {
              // fontSize:_self.$fontSize.fontSize(.25),
              areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
            }
          },
          data: customerNum
        }
      ];
      // 地图配置
      let option = {
        ...geo,
        series: series,
        // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
        animationDuration: 1000,
        animationEasing: "cubicOut",
        // 数据更新动画的时长。
        animationDurationUpdate: 1000
      };
      if (status) {
        myChart.setOption(option, true);
        // myChart.setOption(
        //   option,
        //   {
        //     replaceMerge: ["geo"],
        //   },
        //  false
        // );
      } else {
        myChart.setOption(option);
      }
      this.curMap = {};
      this.curMap = {
        mapName: mapTitle, //地图名称
        mapJson: mapJson, // 地图的json数据
        mapChina: this.mapChina,
        sortData: sortData, // 排序后的json数据
        titledata: titledata, // 地图名称下对应的地理名数组
        provincesName: provincesName
      };
    },
    // 渲染二级地图，城市
    renderPrimaryMap(result, flag) {
      let tmp = [];
      if (flag) {
        result.forEach(item => {
          tmp.push({
            id: item.id,
            name: item.name,
            value: Math.floor(Math.random() * 100 + parseInt(item.id))
          });
        });
      }
      //获取最大值，并排序
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      //绘制地图，拿到数据后再渲染一次
      console.log('第一次绘制地图')
      this.initEcharts(mapName, this.mapChina, tmp, false);
    },
    setAreaList(data) {
      this.areaList = data; // vue是这样写的，内部有代理
    },

    // 获得最大值并排序  ？？？？？
    getMaxDataAndSort(originData) {
      console.error('获得最大值并排序 - 将下一级城市根据id排序', originData)
      if (originData == "undefined") {
        return;
      }
      titledata = [];
      sortData = [];
      sortData = originData.sort(this.numDescSort);
      let maxData = sortData.slice(-1)[0]["value"];
      let maxDataId = sortData.slice(-1)[0]["id"];
      if (!maxDataId) {
        maxDataId = sortData.slice(-1)[0]["cityid"]
          ? sortData.slice(-1)[0]["cityid"]
          : sortData.slice(-1)[0]["areaid"];
      }
      for (let i = 0; i < sortData.length; i++) {
        titledata.push(sortData[i].name);
      }
      areaList = [...sortData].reverse();
      this.setAreaList(areaList);
      return {
        maxDataId,
        maxData
      };
    },
    numDescSort(a, b) {
      return a["value"] - b["value"];
    },
    // no 
    stringToJson(data) {
      let result = Object.create(null);
      if (Object.prototype.toString.call(data) !== "[object Object]") {
        try {
          result = JSON.parse(data);
        } catch {
          throw TypeError("数据转换成JSON出错");
        }
      }
      return result;
    },
    getCityNumber(name, id, data) {
      if (!id) {
        return;
      }
      // let postData2 = {
      //   parentid: 'provinceid',
      //   value: id,
      // }
      this.renderSecondMap(name, data, true);
    },
    renderSecondMap(eName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach(item => {
          tmp.push({
            //需要加上cityid传递渲染，下一级地图渲染需要用到，点击的时候有判断，没有下级id直接return
            cityid: item.id,
            name: item.properties.name,
            value: item.properties.childNum
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(eName, this.mapChina, tmp, false);
    },
    getAreaNumber(cityName, cityId, data) {
      //   let postData3 = {
      //   parentid: 'cityid',
      //   value: cityId,
      // }
      this.renderThirdMap(cityName, data, true);
    },
    renderThirdMap(cityName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach(item => {
          tmp.push({
            areaid: item.id,
            name: item.properties.name,
            value: Math.floor(Math.random() * 10 + 1)
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(cityName, this.mapChina, tmp, false);
    },
    // 航线图表
    renderScatter(map) {
      if (this.firstRender) {
        console.error(map, 'renderScatter')
        var color = ["#f0814dea", "#f0814dea", "#f0814dea"];
        var series = [];
        // [["南京市", GZData]].forEach(function(item, i) {
        //   series.push(
        //     // 涟漪散点图
        //     {
        //       name: item[0],
        //       type: "effectScatter",
        //       coordinateSystem: "geo",
        //       zlevel: 2,
        //       rippleEffect: {
        //         brushType: "stroke"
        //       },
        //       label: {
        //         normal: {
        //           show: true,
        //           position: "right",
        //           formatter: "{b}"
        //         }
        //       },
        //       symbolSize: function(val) {
        //         return val[2] / 8;
        //       },
        //       itemStyle: {
        //         normal: {
        //           color: color[i]
        //         }
        //       },
        //       data: item[1].map(function(dataItem) {
        //         return {
        //           name: dataItem[1].name,
        //           value: geoCoordMap[dataItem[1].name].concat([
        //             dataItem[1].value
        //           ])
        //         };
        //       })
        //     }
        //   );
        // });
        let option = {
          // tooltip: {
          //   trigger: "item",
          // },
          geo: {
            map: map,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#ddd"
                }
              },
              emphasis: {
                textStyle: {
                  color: "#000"
                }
              }
            },
            // label: {
            //   emphasis: {
            //     show: false,
            //   },
            // },
            // roam: true,
            itemStyle: {
              normal: {
                areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                borderColor: "#EBEBE4", //#EBEBE4灰色
                borderWidth: 0.5
              },
              emphasis: {
                areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
              }
            }
            // itemStyle: {
            //   normal: {
            //     //          	color: '#ddd',
            //     borderColor: "rgba(147, 235, 248, 0)",
            //     borderWidth: 1,
            //     areaColor: {
            //       type: "radial",
            //       x: 0.5,
            //       y: 0.5,
            //       r: 0.8,
            //       colorStops: [
            //         {
            //           offset: 0,
            //           color: "rgba(175,238,238, 0)", // 0% 处的颜色
            //         },
            //         {
            //           offset: 1,
            //           color: "rgba(	47,79,79, .01)", // 100% 处的颜色
            //         },
            //       ],
            //       globalCoord: false, // 缺省为 false
            //     },
            //   },
            // },
          },
          series: series
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
    },
    // 制作散点图
    renderCityScatter() {
      console.log(this.firstRender, provincesName, '制作散点图')
      if (this.firstRender) {
        // 金华119.682762,29.08767
        // 118.87788,29.039177
        if (isNaN(parseInt(provincesName))) {
          var chinaGeoCoordMap = {};
          var chinaDatas = [];
          if (provincesName == "jiangsu") {
            chinaGeoCoordMap = {
              // 经纬度
              南京市: [118.800697, 32.077625],
              // 无锡市: [120.308234, 31.498071],
              无锡市: [120.308234, 31.498071],
              淮安市: [119.042984, 33.534205],
              徐州市: [117.201199, 34.33465],
              // 宿迁市33: [118.287324, 33.970145],
              // 扬州市: [119.428622, 32.403603],
              // 南通市: [120.900441, 31.994389],
              // 泰州市: [119.926122, 32.464087],
              杭州市: [120.121431, 30.221378],
            };
            chinaDatas = [
              //航线条数
              // [
              //   {
              //     name: "宿迁市33",
              //     value: 0
              //   }
              // ],
   
              // [
              //   {
              //     name: "扬州市",
              //     value: 0
              //   }
              // ],
              // [
              //   {
              //     name: "南通市",
              //     value: 0
              //   }
              // ],
              // [
              //   {
              //     name: "泰州市",
              //     value: 0
              //   }
              // ]
            ];
          } else {
            chinaGeoCoordMap = {};
            chinaDatas = [];
          }
          var convertDataPro = function(data) {
            var res = [];
            // for (var i = 0; i < data.length; i++) {
            //   var dataItem = data[i];
            //   var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            //   var toCoord = [118.800697, 32.077625]; //目的地
            //   if (fromCoord && toCoord) {
            //     res.push([
            //       {
            //         coord: fromCoord,
            //         value: dataItem[0].value
            //       },
            //       {
            //         coord: toCoord
            //       }
            //     ]);
            //   }
            // }
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [120.308234, 31.498071]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value
                  },
                  {
                    coord: toCoord
                  }
                ]);
              }
            }
            return res;
          };
          var series = [];
          console.log(provincesName, '省名称provincesName')
          $.getJSON(`/map/province/${provincesName}.json`, json => {
            echarts.registerMap(`${provincesName}`, json);
            var symbolImg2 = "image://" + require("@/assets/logo.png"); // 中心点的图标
            //  var symbolImg2 = "image://" + require("@/assets/logo.png");
            // var symbolImg =
            //   "image://" + require("@/assets/gongshangyinhang-.png");
            var symbolImg =
              "image://" + require("@/assets/zhongguoyinhang.png");
            var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
            // 展示 市级中心点  - '淮安市'  getCenterPoint(this.depotId)

            // console.log(getCenterPoint(this.depotId), 'getCenterPoint(this.depotId)')
            [[HighlightLocation(this.depotId), chinaDatas]].forEach(function(item) {
              series.push(
                {
                  type: "lines",
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 5, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: symbolImgPlane, //箭头图标
                    // symbol:'arrow',
                    symbolSize: _self.$fontSize.fontSize(0.2) //图标大小
                  },
                  lineStyle: {
                    normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                      color: "#f0814dea"
                    }
                  },
                  data: convertDataPro(item[1])
                },
                {
                  type: "effectScatter", //effectScatter
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    //涟漪特效
                    period: 20, //动画时间，值越小速度越快
                    brushType: "stroke", //波纹绘制方式 stroke, fill
                    scale: 0 //波纹圆环最大限制，值越大波纹越大
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right", //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) {
                        //圆环显示文字
                        return params.data.name;
                      },
                      fontSize: _self.$fontSize.fontSize(0.13)
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  symbol: symbolImg,
                  symbolSize: _self.$fontSize.fontSize(0.2),
                  itemStyle: {
                    normal: {
                      show: false,
                      color: "#f00"
                    }
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[0].name,
                      value: chinaGeoCoordMap[dataItem[0].name].concat([
                        dataItem[0].value
                      ])
                    };
                  })
                },
                //被攻击点
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      //offset:[5, 0],
                      color: "#f60",
                      formatter: "{b}",
                      textStyle: {
                        color: "#f60"
                      }
                    },
                    emphasis: {
                      show: true,
                      color: "#f60"
                    }
                  },
                  symbol: symbolImg2,
                  symbolSize: _self.$fontSize.fontSize(0.2),
                  data: [
                    {
                      name: item[0],
                      value: chinaGeoCoordMap[item[0]].concat([10])
                    }
                  ]
                }
              );
            });

            let option = {
              geo: {
                show: true,
                map: provincesName,
                label: {
                  normal: {
                    show: false,
                    textStyle: {
                      color: "#ddd"
                    }
                  },
                  emphasis: {
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                    borderColor: "#EBEBE4", //#EBEBE4灰色
                    borderWidth: 0.5
                  },
                  emphasis: {
                    areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
                  }
                }
                // itemStyle: {
                //   normal: {
                //     //	color: '#ddd',
                //     borderColor: "rgba(147, 235, 248, 0)",
                //     borderWidth: 1,
                //     areaColor: {
                //       type: "radial",
                //       x: 0.5,
                //       y: 0.5,
                //       r: 0.8,
                //       colorStops: [
                //         {
                //           offset: 0,
                //           color: "rgba(175,238,238, 0)", // 0% 处的颜色
                //         },
                //         {
                //           offset: 1,
                //           color: "rgba(	47,79,79, .01)", // 100% 处的颜色
                //         },
                //       ],
                //       globalCoord: false, // 缺省为 false
                //     },
                //   },
                // },
                // itemStyle: {
                //   normal: {
                //     areaColor: "transparent",
                //     borderColor: "#3fdaff",
                //     borderWidth: 2,
                //     shadowColor: "rgba(63, 218, 255, 0.5)",
                //     shadowBlur: 30,
                //   },
                //   emphasis: {
                //     areaColor: "#2B91B7",
                //   },
                // },
              },
              series: series,
              // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
              animationDuration: 1000,
              animationEasing: "cubicOut",
              // 数据更新动画的时长。
              animationDurationUpdate: 1000
            };
            if (this.areaList.length != 34 && this.areaList.length != 0) {
              myChart.setOption(option);
            }
          });
        } else {
          console.error(provincesName, 'mmmmmprovincesName')


          // if (provincesName == "320200") {
          //   // 经纬度
          //   var geoCoordMapcityArr = {

          //     // "中国银行-陆行路支行": [119.827586, 31.346164],
          //     // "中国银行-知行路支行": [120.383539, 31.594944],
          //     "中国银行-平行路路支行": [120.295576, 31.536363],
          //     窍楚: [120.276909, 31.913019] // 目标值
          //   };
          //   var datacity = [
          //     //航线条数
          //     // [
          //     //   {
          //     //     name: "中国银行-陆行路支行",
          //     //     value: 0
          //     //   }
          //     // ],
          //     // [
          //     //   {
          //     //     name: "中国银行-知行路支行",
          //     //     value: 0
          //     //   }
          //     // ],
          //     [
          //       {
          //         name: "中国银行-平行路路支行",
          //         value: 0
          //       }
          //     ]
              
          //   ];
          //   chinaGeoCoordMap = {};
          //   chinaDatas = [];
            
          // } else if (provincesName == "320100") {
          //   // 320100  南京-
          //   // 经纬度
          //   var geoCoordMapcityArr = {
          //     // "中国银行-南京-陆行路支行": [118.390, 31.346164],
          //     // "中国银行-南京-知行路支行": [118.383539, 31.594944],
          //     "中国银行-南京-平行路路支行": [118.295576, 31.536363],
          //     窍楚: [118.77142703125, 31.9597585273438] // 目标值
          //   };
          //   var datacity = [
          //     //航线条数
          //     // [
          //     //   {
          //     //     name: "中国银行-南京-陆行路支行",
          //     //     value: 0
          //     //   }
          //     // ],
          //     // [
          //     //   {
          //     //     name: "中国银行-南京-知行路支行",
          //     //     value: 0
          //     //   }
          //     // ],
          //     [
          //       {
          //         name: "中国银行-南京-平行路路支行",
          //         value: 0
          //       }
          //     ]
          //   ];
          //   chinaGeoCoordMap = {};
          //   chinaDatas = [];
          // } else 
          if (provincesName == "320800") {
            // 320800  淮安-
            // 经纬度
            var geoCoordMapcityArr = {
              // "中国银行-淮安-陆行路支行": [117.590, 33.646164],
              "金湖支行": [118.984079, 33.109181],
              "楚州支行": [119.148941, 33.505437],
              "盱眙支行": [118.514509, 32.996926],
              "涟水支行": [119.272232, 33.771227],
              "清浦支行": [119.030826, 33.585220],
              "清江浦支行": [119.023294, 33.607772],
              "深圳路支行": [119.077419, 33.592022],


              窍楚: [119.042984, 33.534205] // 目标值
            };
            var datacity = [
              //航线条数
              [
                {
                  name: "金湖支行",
                  value: 0
                }
              ],
              [
                {
                  name: "楚州支行",
                  value: 0
                }
              ],
              [
                {
                  name: "盱眙支行",
                  value: 0
                }
              ],
              [
                {
                  name: "涟水支行",
                  value: 0
                }
              ],
              [
                {
                  name: "清浦支行",
                  value: 0
                }
              ],
              [
                {
                  name: "清江浦支行",
                  value: 0
                }
              ],
              [
                {
                  name: "深圳路支行",
                  value: 0
                }
              ]
            ];
            chinaGeoCoordMap = {};
            chinaDatas = [];
          } else {
            geoCoordMapcityArr = {};
            datacity = [];
            chinaGeoCoordMap = {};
            chinaDatas = [];
          }

          var convertDatacity = function(data) {
            var res = [];
            var symbolImg =
              "image://" + require("@/assets/gongshangyinhang-.png");
            var symbolImg2 = "image://" + require("@/assets/logo.png"); // 中心点的图标
            symbolImg2;
            symbolImg;
            // var toCenterCoord=[]
            for (var i = 0; i < data.length; i++) {
              var dataItem2 = data[i];
              var geoCoord = geoCoordMapcityArr[dataItem2[0].name];
              var toCoord2 = geoCoordMapcityArr['窍楚'];
              // [120.276909, 31.913019];  //目的地
              if (geoCoord && toCoord2) {
                res.push([
                  {
                    coord: geoCoord,
                    value: dataItem2[0].value
                  },
                  {
                    coord: toCoord2
                  }
                ]);
              }
            }
            return res;
          };
          $.getJSON(`/map/city/${provincesName}.json`, json => {

            console.log('dddddddddddddd', provincesName, json)
            var series = [];
            var symbolImg2 = "image://" + require("@/assets/logo.png");
            var symbolImg =
              "image://" + require("@/assets/zhongguoyinhang.png"); // 中国银行图标
            var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
            echarts.registerMap(`${provincesName}`, json);
            [["窍楚", datacity]].forEach(function(item) {
              series.push(
                {
                  type: "lines",
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 5, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: symbolImgPlane, //箭头图标
                    symbolSize: _self.$fontSize.fontSize(0.2) //图标大小
                    // color: "blue", // 图标的颜色
                  },
                  lineStyle: {
                    normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                      color: "#f0814dea"
                    }
                  },
                  data: convertDatacity(item[1])
                },
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  label: {
                    normal: {
                      show: true,
                      position: "right", //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) {
                        //圆环显示文字
                        return params.data.name;
                      },
                      fontSize: _self.$fontSize.fontSize(0.13)
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  symbol: symbolImg,
                  symbolSize: _self.$fontSize.fontSize(0.2),
                  itemStyle: {
                    normal: {
                      show: false,
                      color: "#ccc"
                    }
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[0].name,
                      value: geoCoordMapcityArr[dataItem[0].name].concat([
                        dataItem[0].value
                      ])
                    };
                  })
                },
                //被攻击点
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      //offset:[5, 0],
                      color: "#f60",
                      formatter: "{b}",
                      textStyle: {
                        color: "#f60"
                      }
                    },
                    emphasis: {
                      show: true,
                      color: "#f60"
                    }
                  },
                  symbol: symbolImg2,
                  symbolSize: _self.$fontSize.fontSize(0.3),
                  data: [
                    {
                      name: item[0],
                      value: geoCoordMapcityArr[item[0]].concat([10])
                    }
                  ]
                }
              );
            });
            let option = {
              geo: {
                show: true,
                map: provincesName,
                label: {
                  normal: {
                    show: false,
                    textStyle: {
                      color: "#ddd"
                    }
                  },
                  emphasis: {
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                    borderColor: "#EBEBE4", //#EBEBE4灰色
                    borderWidth: 0.5
                  },
                  emphasis: {
                    areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
                  }
                }
                // itemStyle: {
                //   normal: {
                //     // color: '#ddd',
                //     borderColor: "rgba(147, 235, 248, 0)",
                //     borderWidth: 1,
                //     areaColor: {
                //       type: "radial",
                //       x: 0.5,
                //       y: 0.5,
                //       r: 0.8,
                //       colorStops: [
                //         {
                //           offset: 0,
                //           color: "rgba(175,238,238, 0)", // 0% 处的颜色
                //         },
                //         {
                //           offset: 1,
                //           color: "rgba(	47,79,79, .01)", // 100% 处的颜色
                //         },
                //       ],
                //       globalCoord: false, // 缺省为 false
                //     },
                //   },
                // },
                // itemStyle: {
                //   normal: {
                //     areaColor: "transparent",
                //     borderColor: "#3fdaff",
                //     borderWidth: 2,
                //     shadowColor: "rgba(63, 218, 255, 0.5)",
                //     shadowBlur: 30,
                //   },
                //   emphasis: {
                //     areaColor: "#2B91B7",
                //   },
                // },
              },
              series: series
            };
            myChart.setOption(option);
          });
        }
      }
    },
  }
};
</script>
